<template>
  <div id="app">
    <h2>-----App内容:modules的内容-----</h2>
    <h2>{{$store.state.a.name}}</h2>
    <button @click="updateName">改名字</button>
    <h2>{{$store.getters.fullName}} - {{$store.getters.fullName2}} - {{$store.getters.fullName3}}</h2>
    <button @click="asycuodateName">异步改名字</button>
    <h2>-----App内容:info对象-----</h2>
    <h2>{{$store.state.info}}</h2>
    <button @click="updateInfo">更改</button>
    <h2>-----App内容-----</h2>
    <h2>{{$store.state.counter}}</h2>
    <button @click="addition">+</button>
    <button @click="subtraction">-</button>
    <button @click="addCount(5)">+5</button>
    <button @click="addCount(10)">+10</button>
    <button @click="addStudent">添加学生</button>
    <h2>-----App内容:getters相关-----</h2>
    <h2>{{$store.getters.powerCount}}</h2>
    <h2>{{$store.getters.more20stu}}</h2>
    <h2>{{$store.getters.more20stuLength}}</h2>
    <h2>{{$store.getters.moreAgeStu(12)}}</h2>
    <h2>-----HelloVuex内容-----</h2>
    <HelloVuex></HelloVuex>
    <RouterView/>
  </div>
</template>

<script>
  import HelloVuex from "./components/HelloVuex"

  export default {
    name: 'App',
    components: {
      HelloVuex
    },
    data() {
      return {
        message: "我是app组件",
        counter: 0
      }
    },
    methods: {
      addition() {
        this.$store.commit("incrnment") // $store.commit() 传入事件名称
      },
      subtraction() {
        this.$store.commit("decrnment")
      },
      addCount(count) {
        // 普通提交的封装 commit 针对vusx的mutations
        // this.$store.commit("incrnmentCount", count) // (type: string, payload?: any, options?: CommitOptions)

        // 特殊提交的封装
        this.$store.commit({
          type: "incrnmentCount",
          count
        })
      },
      addStudent() {
        const student = {id: 105, name: "ee", age: 31}
        this.$store.commit("addStudent", student)
      },
      updateInfo() {
        // this.$store.commit("updateInfo")
        // dispatch 针对vusx的actions
        // this.$store.dispatch("aupdayeinfo", "我是payload")
        // this.$store.dispatch("aupdayeinfo", {
        //   message: "我说payload",
        //   success: () => {
        //     console.log("里面操作完成");
        //   }
        // })
        this.$store.dispatch("aupdayeinfo", '我是携带的信息')
          .then(res => {
            console.log("里面完成提交");
            console.log(res);
          })
      },
      updateName() {
        this.$store.commit("updateName", "李四")
      },
      asycuodateName() {
        this.$store.dispatch("aupdateName")
      }
    }
  }
</script>

<style>
  #app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
  }
</style>
